﻿<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
            background: #000;
        }
        
        #canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
    <metacharset="utf-8">
        <title>Fireworks</title>
        <script>
            let w, h;
            let canvas, ctx;
            let fireworks;
            window.onload = function() {
                canvas = document.getElementById("canvas");
                ctx = canvas.getContext("2d");
                w = canvas.width = window.innerWidth;
                h = canvas.height = window.innerHeight;
                fireworks = [];
                window.onresize = function() {
                    w = canvas.width = window.innerWidth;
                    h = canvas.height = window.innerHeight;
                }
                flush();
                canvas.onclick = function(e) {
                    // ctx.fillStyle = "red";
                    // ctx.fillRect(e.clientX, e.clientY, 10, 10);
                    let f = new Fireworks();
                    f.init(e.clientX, e.clientY);
                    fireworks.push(f);
                }

            }

            function flush() {
                ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
                ctx.fillRect(0, 0, w, h);
                for (let i = 0; i < fireworks.length; i++) {
                    fireworks[i].update();
                }
                requestAnimationFrame(flush);
            }

            function Fireworks() {}
            Fireworks.prototype = {
                init: function(x, t) {
                    // this.x = randomCustom(0, w);
                    // this.t = randomCustom(100, 300);
                    this.x = x;
                    this.t = t;
                    this.y = h;
                    this.speedY = randomCustom(4, 5);
                    this.step = 1;
                    this.fires = [];
                    this.status = true;
                },
                update: function() {
                    if (this.step === 1) {
                        this.y -= this.speedY;
                        this.speedY -= 0.02;
                        if (this.y <= this.t || this.speedY <= 0) {
                            this.step = 2;
                        }
                        let color = randomColor();
                        ctx.fillStyle = color;
                        ctx.beginPath();
                        ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
                        ctx.fill();
                    } else if (this.step === 2) {
                        if (this.status) {
                            if (this.fires.length === 0) {
                                let n = randomCustom(30, 60);
                                for (let i = 0; i < n; i++) {
                                    let f = new Fire();
                                    f.init(this.x, this.y);
                                    this.fires.push(f);
                                }
                            }
                            for (let i = 0; i < this.fires.length; i++) {
                                let fire = this.fires[i];
                                fire.update();
                                if (!fire.status) {
                                    this.fires.splice(i, 1);
                                    // i--;
                                }

                                let color = randomColor();
                                ctx.fillStyle = color;
                                ctx.fillRect(fire.x, fire.y, 3, 3);
                                ctx.closePath();
                            }
                            if (this.fires.length === 0) this.status = false;
                        }
                    }
                },
            }

            function Fire() {};
            Fire.prototype = {
                init: function(x, y) {
                    this.x = x;
                    this.y = y;
                    this.speedX = randomCustom(-5, 5);
                    this.speedY = randomCustom(-5, 5);
                    this.status = true;
                },
                update: function() {
                    if (this.x > 0 && this.x < w && this.y < h) {
                        this.x += this.speedX;
                        this.y += this.speedY;
                        this.speedY += 0.01;
                    } else {
                        this.status = false;
                    }
                }
            }

            function randomCustom(min, max) {
                return Math.random() * (max - min) + min;
            }

            function randomColor() {
                let r = Math.floor(Math.random() * 100) + 156;
                let g = Math.floor(Math.random() * 200) + 56;
                let b = Math.floor(Math.random() * 100) + 156;
                let a = Math.random() * 0.5 + 0.5;
                return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
            }
        </script>
</head>

<body>
    <canvas id="canvas">你的浏览器不支持canvas标签。</canvas>
</body>

</html>